<template>
    <div class="home-wrapper">
        <div class="home-header flex_row">
            <div class="input-wrapper flex_row">
                <input v-model="keyword" class="tip-input" type="text" placeholder="请输入搜索关键字、订单名称等" @return="inputReturned" return-key-type="search">
                <image class="search-icon" :src="imgPath('search.png')" @click="inputReturned"></image>
            </div>
            <image class="message" :src="imgPath('notice.png')" @click="jumpTo('/message')"></image>
        </div>
        <scroller style="padding-bottom: 120px;" show-scrollbar="false" @loadmore="loadmore" loadmoreoffset="120">
            <slider class="slider" interval="3000" auto-play="true" v-if="imageList.length > 0">
                <div class="frame" v-for="(item, index) in imageList" :key="index">
                    <image class="banner" resize="cover" :src="item.picture"></image>
                </div>
                <indicator class="indicator"></indicator>
            </slider>
            <div class="notice-wrapper border_bottom_ebebeb flex_row" v-if="noticeList.length > 0">
                <text class="notice-title">最新公告</text>
                <text class="notice-content">{{noticeList[noticeIndex].title}}</text>
            </div>
            <!--菜单区-->
            <div class="menu-wrapper">
                <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleClickMenu(item)">
                    <image class="menu-icon" :src="imgPath(item.icon)"></image>
                    <text class="menu-text">{{item.word}}</text>
                </div>
            </div>
            <div class="xian"></div>
            <!--即将结单-->
            <div class="endSoon-wrapper" v-if="endSoonList && endSoonList.length > 0">
                <div class="endSoon-top space_between flex_row align_center">
                    <text class="endSoon-title fs_28">即将结单</text>
                    <text class="col_ff0f37 fs_24" @click="jumpTo('/home/endSoon')">查看全部>></text>
                </div>
                <div class="flex_row">
                    <div class="flex_row endSoon-item" :class="[index !== endSoonList.length - 1 ? 'margin_right_24' : '']" v-for="(item, index) in endSoonList" :key="index" @click="toTaskDetail(item)">
                        <image class="endSoon-image"  :src="item.imgUrl ? item.imgUrl : imgPath('default_image.png')"></image>
                        <div class="endSoon-content">
                            <text class="endSoon-word">{{item.title}}</text>
                            <text class="endSoon-number" v-if="item.budget">预算：￥{{item.budget}}</text>
                            <text class="endSoon-number" v-if="item.orderNumber">数量：{{item.orderNumber}}套</text>
                        </div>
                    </div>
                </div>
            </div>
            <div class="xian"></div>
            <!--平台求购-接单-->
            <div class="platform-wrapper">
                <div class="tab-wrapper flex_row">
                    <text class="tab-item" @click="handleChangeTab(index)" :class="[itemIndex === index ? 'active-item' : '']" v-for="(item, index) in itemList" :key="index">{{item.name}}</text>
                </div>
                <text class="noData" v-if="taskDataList.length <= 0">暂无数据</text>
                <div class="itemList" v-if="taskDataList && taskDataList.length > 0">
                    <div class="itemCell flex_row" v-for="(item, index) in taskDataList" :key="index" @click="toTaskDetail(item)">
                        <image class="cell-image" resize="contain" :src="item.imgUrl ? item.imgUrl : imgPath('default_image.png')"></image>
                        <div class="cell-content">
                            <div class="cell-user flex_row">
                                <image class="user-avatar" :src="item.userPic ? item.userPic : imgPath('default_avatar.png')"></image>
                                <text class="user-name line-1">{{item.userName ? item.userName : '无昵称'}}</text>
                            </div>
                            <text class="cell-title line-1">{{item.title}}</text>
                            <div class="flex_row line-1 cell-content" style="margin-bottom: 8px;">
                                <text v-if="itemIndex === 0 || itemIndex === 1" class="cell-number fs_24 col_868686 line_height_36">数量：{{item.orderNumber}}{{item.numberUnit}}</text>
                                <text v-if="itemIndex === 2" class="cell-number fs_24 col_868686 line_height_36">订单数量：{{item.orderNumber}}</text>
                                <text v-if="itemIndex === 3" class="cell-number cell-content line-1 fs_24 col_868686 line_height_36">主营产品：{{item.type}}</text>
                                <text v-if="itemIndex === 4" class="cell-number fs_24 col_868686 line_height_36">预算：{{item.budget == 0 ? '面议' : item.budget}}</text>
                                <text v-if="itemIndex === 0 || itemIndex === 1" class="fs_24 col_868686 line_height_36">求购类型：{{item.type}}-{{item.subType}}</text>
                                <text v-if="itemIndex === 2" class="cell-number fs_24 col_868686 line_height_36">产品类型：{{item.type}}</text>
                                <text v-if="itemIndex === 4" class="cell-number fs_24 col_868686 line_height_36">高人类型：{{item.type}}</text>
                            </div>
                            <div class="flex_row space_between align_center">
                                <text class="cell-time line_height_36">截止时间：{{item.taskValidity}}</text>
                                <text class="cell-button fs_24" @click="getOrder(item)" v-if="item.taskStatus === '1'">接单</text>
                                <text class="cell-button fs_24" v-if="item.taskStatus === '2' || item.taskStatus === '5'">来晚了</text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </scroller>
        <!--弹窗-->
        <div class="mask-wrapper" v-if="marketDialog">
            <div class="market-content">
                <text class="market-name">{{platformType === 'publish' ? '发布信息' : '大师工坊'}}</text>
                <text class="description">{{platformType === 'publish' ? '最专业的泳装交易和服务平台' : '提供设计、打版、打样、人才和技术一站式服务'}}</text>
                <div class="plat-wrapper">
                    <div class="plat-item" v-for="(item, index) in platformType === 'publish' ? publishList : platformList" :key="index" @click="jumpTo(item.path)">
                        <image class="plat-icon" :src="imgPath(item.icon)"></image>
                        <div class="plat-right">
                            <text class="plat-name">{{item.name}}</text>
                            <text class="plat-desc">{{item.description}}</text>
                        </div>
                    </div>
                </div>
                <div class="close-wrapper">
                    <image class="close-market" :src="imgPath('market_close.png')" @click="closeDialog"></image>
                </div>
            </div>
        </div>
        <NavBottom></NavBottom>
        <Modal :show="showModal" :word="modalWord" type="1"></Modal>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask" @wxcLoadingMaskClicked="maskClicked"></wxc-loading>
    </div>
</template>

<script>
import { WxcLoading } from 'weex-ui'
import NavBottom from '@/components/navBottom'
import Modal from '@/components/modal'
import { validatenull } from '@/util/validate'
import { queryNoticeList, querySliderList, queryEndsoonList, queryTaskList, changeTaskStatus } from '@/api/home'
const modal = weex.requireModule('modal')
// const wxPay = weex.requireModule('wxPay')
export default {
  name: 'home',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      showModal: false, // 弹窗显示
      keyword: '', // 搜索词
      modalWord: '', // 弹窗提示
      imageList: [], // 轮播图
      endSoonList: [], // 即将结单列表
      marketDialog: false,
      platformType: 'publish',
      publishList: [
        {
          name: '找布料',
          icon: 'fabric_dealer.png',
          path: '/market/material',
          description: '马上发布，快速找布料'
        },
        {
          name: '找辅料',
          icon: 'excipient_dealer.png',
          path: '/market/accessories',
          description: '马上发布，快速找辅料'
        },
        {
          name: '找工厂',
          icon: 'swimsuit_factory.png',
          path: '/market/factory',
          description: '马上发布，快速找工厂'
        },
        {
          name: '找订单',
          icon: 'find_order.png',
          path: '/market/order',
          description: '马上发布，快速找订单'
        },
        {
          name: '找高人',
          icon: 'designer.png',
          path: '/market/master',
          description: '马上发布，快速找高人'
        }
      ],
      platformList: [
        {
          name: '设计',
          icon: 'designer.png',
          path: '/market/design',
          description: '泳衣库为您提供专业设计服务'
        },
        {
          name: '打版',
          icon: 'printer.png',
          path: '/market/edition',
          description: '泳衣库为您提供专业打版服务'
        },
        {
          name: '做样',
          icon: 'sam_garm_worker.png',
          path: '/market/proof',
          description: '泳衣库为您提供专业做样服务'
        },
        {
          name: '高人',
          icon: 'designer.png',
          path: '/market/platformMaster',
          description: '泳衣库为您提供全球泳装人才服务'
        },
        {
          name: '数据',
          icon: 'icon_data.png',
          path: '',
          description: '泳衣库为您提供专业数据服务'
        }
      ],
      menuList: [
        {
          icon: 'menu_ask.png',
          word: '求购信息',
          path: '/market/askInformation',
          type: ''
        },
        {
          icon: 'menu_master.png',
          word: '大师工坊',
          path: '/market/publishTask',
          type: 1
        },
        {
          icon: 'menu_task.png',
          word: '发布信息',
          path: '/market/publishTask',
          type: 0
        },
        {
          icon: 'menu_mypublic.png',
          word: '我的发布',
          path: '/mine/myPublic',
          type: ''
        }
      ], // 菜单列表
      itemList: [
        {
          name: '求购布料',
          type: '8'
        },
        {
          name: '求购辅料',
          type: '9'
        },
        {
          name: '对外加工',
          type: '10'
        },
        {
          name: '外发订单',
          type: '11'
        },
        {
          name: '寻找高人',
          type: '12'
        }
      ], // 服务类型
      itemIndex: 0, // 类型下标
      pageNo: 1,
      pageSize: 6,
      taskDataList: [], // 任务数据列表
      hasMore: true, // 是否还有数据
      askType: ['大货', '样品'], // 求购类型
      childrenType: ['现货', '定制'], // 子类型列表
      noticeList: [], // 公告列表
      noticeIndex: 0, // 当前显示公告下标
      noticeTimer: null // 公告定时器
    }
  },
  created () {
    const that = this
    let obj = that.$route.query.obj // 获取传参
    if (obj && obj.success) {
      that.modalWord = obj.word
      that.showModal = true
      setTimeout(() => {
        that.showModal = false
      }, 2000)
    }
  },
  mounted () {
    const that = this
    that.loadingShow = true
    that.$api.get(queryNoticeList, {}, (res) => {
      that.noticeList = res.data
      that.loadingShow = false
      if (that.noticeList.length > 0) {
        that.noticeTimer = setInterval(() => {
          if (that.noticeIndex < that.noticeList.length - 1) {
            that.noticeIndex++
          } else {
            that.noticeIndex = 0
          }
        }, 3000)
      }
    })
    that.loadingShow = true
    that.$api.get(querySliderList + '13', {}, (res) => {
      for (let i in res.data) {
        that.imageList = res.data[i]
      }
      that.loadingShow = false
    })
    that.loadingShow = true
    that.$api.get(queryEndsoonList, {
      pageNo: 1,
      pageSize: 10
    }, (res) => {
      let list = res.data.records
      if (list.length > 3) {
        that.endSoonList = list.slice(0, 3)
      } else {
        that.endSoonList = list
      }
      that.loadingShow = false
    })
    that.getTaskDataList()
  },
  methods: {
    maskClicked () {
      return false
    },
    closeDialog () {
      const that = this
      that.marketDialog = false
    },
    inputReturned () { // 搜索确定
      const that = this
      that.$router.push({
        path: '/home/searchList',
        query: {
          keyword: that.keyword
        }
      })
    },
    jumpTo (path) { // 路由跳转
      if (!path) {
        modal.toast({
          message: '该功能暂未开放'
        })
        return
      }
      this.$router.push(path)
    },
    handleClickMenu (item) { // 弹窗
      const that = this
      that.$router.push({
        path: item.path,
        query: {
          type: item.type
        }
      })
      // if (!item.path) {
      //   that.platformType = item.type
      //   that.marketDialog = true
      // }
    },
    getOrder (item) { // 接单
      const that = this
      let params = {
        id: item.id,
        taskStatus: 2
      }
      that.$api.post(changeTaskStatus, params, () => {
        modal.toast({
          message: '接单成功'
        })
      }, () => {}, true)
    },
    handleChangeTab (inx) { // 求购类型切换
      const that = this
      if (that.itemIndex === inx) {
        return
      }
      that.itemIndex = inx
      that.hasMore = true
      that.pageNo = 1
      that.taskDataList = []
      that.getTaskDataList()
    },
    getTaskDataList () { // 获取任务列表
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        serviceType: that.itemList[that.itemIndex].type
        // taskStatus: 1
      }
      that.loadingShow = true
      that.$api.get(queryTaskList, params, (res) => {
        that.loadingShow = false
        if (validatenull(res.data.records)) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.taskDataList = that.taskDataList.concat(res.data.records)
      })
    },
    toTaskDetail (item) { // 查看详情
      const that = this
      let type = 1
      if (Number(item.serviceType) >= 8 && Number(item.serviceType) <= 12) {
        type = 0
      }
      that.$router.push({
        path: '/mine/taskOrderDetail',
        query: {
          id: item.id,
          type: type,
          serviceType: item.serviceType
        }
      })
    },
    loadmore () {
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getTaskDataList()
    }
  },
  components: {
    WxcLoading,
    NavBottom,
    Modal
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .space_between {
        justify-content: space-between;
    }
    .align_center {
        align-items: center;
    }
    .fs_24 {
        font-size: 24px;
    }
    .fs_28 {
        font-size: 28px;
    }
    .col_868686 {
        color: #868686;
    }
    .col_ff0f37 {
        color: #ff0f37;
    }
    .border_bottom_ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .margin_right_24 {
        margin-right: 24px;
    }
    .home-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 88px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 24px;
        padding-right: 24px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
        justify-content: space-between;
        align-items: center;
    }
    .input-wrapper {
        width: 624px;
        height: 60px;
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 10px;
        background-color: #fff;
        align-items: center;
    }
    .search-icon {
        width: 30px;
        height: 30px;
        margin-left: 16px;
    }
    .tip-input {
        width: 546px;
        height: 60px;
        border-width: 0px;
        color: #464646;
        placeholder-color: #cecece;
        font-size: 24px;
    }
    .message {
        width: 42px;
        height: 42px;
    }
    .slider {
        width: 750px;
        height: 380px;
        margin-top: 86px;
    }
    .frame {
        width: 750px;
        height: 380px;
    }
    .banner {
        width: 750px;
        height: 380px;
    }
    .indicator {
        position: absolute;
        top: 160px;
        left: 0;
        width: 750px;
        height: 380px;
        item-color: rgba(138, 138, 138, 0.5);
        item-selected-color: rgba(43, 48, 64, 0.5);
        item-size: 16px;
    }
    .notice-wrapper {
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .notice-title {
        font-size: 26px;
        font-weight: bold;
        color: #868686;
    }
    .notice-content {
        width: 560px;
        margin-left: 24px;
        padding-left: 24px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #868686;
        font-size: 24px;
        color: #464646;
        lines: 1;
    }
    .endSoon-wrapper {
        padding-left: 24px;
        padding-right: 24px;
        margin-bottom: 25px;
    }
    .endSoon-top {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .endSoon-title {
        font-weight: bold;
        color: #262626;
    }
    .endSoon-item {
        overflow: hidden;
        width: 218px;
        flex-wrap: wrap;
    }
    .endSoon-image {
        width: 218px;
        height: 218px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .endSoon-content {
        width: 218px;
        padding-top: 8px;
        padding-left: 14px;
        padding-right: 14px;
        padding-bottom: 8px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #ebebeb;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #ebebeb;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .endSoon-word {
        lines: 2;
        font-size: 26px;
        line-height: 36px;
        text-overflow: ellipsis;
        color: #464646;
    }
    .endSoon-number {
        font-size: 24px;
        color: #868686;
    }
    .platform-wrapper {
        /*margin-top: 24px;*/
        padding-left: 24px;
        padding-right: 24px;
    }
    .tab-wrapper {
        justify-content: space-between;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .tab-item {
        /*width: 90px;*/
        line-height: 88px;
        font-size: 26px;
        color: #868686;
        text-align: center;
    }
    .active-item {
        font-size: 28px;
        font-family: bold;
        color: #fecb01;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #fecb01;
    }
    .itemList {
        /*height: 850px;*/
        margin-top: 24px;
        padding-left: 24px;
        padding-right: 24px;
        /*padding-bottom: 40px;*/
    }
    .itemCell {
        padding-bottom: 24px;
    }
    .cell-image {
        width: 200px;
        height: 200px;
        margin-right: 24px;
        border-width: 1px;
        border-style: solid;
        border-color: #ebebeb;
        border-radius: 10px;
    }
    .cell-content {
        flex: 1;
    }
    .line-1 {
        lines: 1;
        text-overflow: ellipsis;
    }
    .cell-user {
        align-items: center;
    }
    .user-avatar {
        width: 56px;
        height: 56px;
        margin-right: 16px;
        border-radius: 28px;
    }
    .user-name {
        width: 390px;
        color: #666;
        font-size: 26px;
    }
    .cell-title {
        font-size: 30px;
        font-weight: bold;
        color: #464646;
        line-height: 64px;
    }
    .cell-number {
        margin-right: 24px;
    }
    .line_height_36 {
        line-height: 36px;
    }
    .cell-time {
        font-size: 22px;
        color: #ff0f37;
    }
    .cell-button {
        width: 100px;
        height: 30px;
        border-width: 1px;
        border-style: solid;
        border-color: #2b3040;
        color: #2b3040;
        line-height: 30px;
        text-align: center;
        border-radius: 8px
    }
    .noData {
        line-height: 88px;
        color: #464646;
        font-size: 26px;
        text-align: center;
    }
    .menu-wrapper {
        padding-top: 48px;
        flex-direction: row;
        justify-content: space-around;
    }
    .menu-item {
        width: 100px;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    .menu-icon {
        width: 100px;
        height: 100px;
    }
    .menu-text {
        line-height: 64px;
        font-size: 26px;
        color: rgb(102, 102, 102);
        line-height: 64px;
    }
    .mask-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(43, 48, 64, 0.9);
    }
    .market-content {
        padding-left: 48px;
        padding-right: 48px;
    }
    .market-name {
        margin-top: 88px;
        line-height: 88px;
        font-size: 46px;
        color: #fff;
        font-family: medium;
        text-align: center;
    }
    .description {
        color: #cecece;
        font-family: regular;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
    }
    .plat-wrapper {
        margin-top: 110px;
    }
    .plat-item {
        flex-direction: row;
        margin-bottom: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 24px;
        padding-right: 24px;
        background-color: #fff;
        border-radius: 20px;
    }
    .plat-icon {
        width: 86px;
        height: 86px;
        margin-right: 24px;
        border-radius: 43px;
    }
    .plat-right {
        flex: 1;
    }
    .plat-name {
        font-size: 30px;
        line-height: 50px;
        color: #464646;
        font-family: bold;
    }
    .plat-desc {
        font-size: 24px;
        font-family: regular;
        color: #868686;
    }
    .close-wrapper {
        margin-top: 50px;
        flex-direction: row;
        justify-content: center;
    }
    .close-market {
        /*position: fixed;*/
        /*left: 315px;*/
        /*bottom: 40px;*/
        width: 120px;
        height: 120px;
    }
    .xian{
        width: 750px;
        height: 10px;
        background-color: #f5f5f5
    }
</style>
